
import { UnControlled as CodeMirror } from 'react-codemirror2'
import { Controlled as CodeMirrorView } from 'react-codemirror2'

import 'codemirror/mode/cmake/cmake';
import 'codemirror/mode/xml/xml';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/clike/clike';
import 'codemirror/theme/idea.css';
import 'codemirror/theme/material.css';
import 'codemirror/lib/codemirror.css';

const defaultOptions = {
    theme: "idea",
    lineNumbers: true
};


const CodeEditor = (props) => {

    const {
        value,
        onChange,
        options = {},
        className
    } = props;

    return (<CodeMirror
        className={className}
        value={value}
        options={{
            ...defaultOptions,
            ...options
        }}
        onChange={onChange}
    />)
}

const CodeView = (props) => {

    const {
        value,
        onChange,
        options = {},
        className
    } = props;

    return (<CodeMirrorView
        className={className}
        value={value}
        options={{
            ...defaultOptions,
            ...options
        }}
        onChange={onChange}>

    </CodeMirrorView>)
}

export { CodeView }
export default CodeEditor;